﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>  
    <title></title>
    <script src="Scripts/jquery-1.8.3.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        
        $(document).ready(function () {

            var iChannel;
            var iGame;
            var strUsername;
            var strPassword;
            var url = 'ws://' + window.location.hostname + window.location.pathname.replace('index.html', '') + 'ws.ashx';
            var ws;
            
            $('#login').show();
            $('#main').hide();

            $('#cmdLogin').click(function () {
                strUsername = $('#Username').val();
                strPassword = $('#Password').val();

                url += '?Username=' + strUsername + '&Password=' + strPassword;

                $('#status').val('Connecting to: ' + url);
                ws = new WebSocket(url);

            ws.onopen = function () {

                $('#login').hide();
                $('#main').show();

                $('#messages').prepend('Connected <br/>');

                $('#cmdSend').click(function () {
                    ws.send($('#txtMessage').val());
                    $('#txtMessage').val('');
                    
                });
            };

            ws.onmessage = function (e) {
                $('#chatMessages').prepend(e.data + '<br/>');
            };

            ws.onclose = function () {
                $('#chatMessages').prepend('Closed <br/>');
            };

            ws.onerror = function (e) {
                $('#chatMessages').prepend('Oops something went wront <br/>');
            };

            })

            $('#cmdLeave').click(function () {
                ws.close();
            });
        });
</script>

</head>
<body>
    <div id="login">
        <div>Username<input type="text" id="Username" /></div>
        <div>Password<input type="password" id="Password" /></div>
        <div><input id="cmdLogin" type="button" value="Login"/></div>
        <div id="status"></div>
    </div>
    <div id="main" style="height:600px">
        <div id="board">
            <div id="channels"></div>
            <div id="games"></div>
        </div>
        <div id="chat">
            <input id="txtMessage" size="50"/>
            <input id="cmdSend" type="button" value="Send" />
            <input id="cmdLeave" type="button" value="Leave" />
            <br />
            <div id="chatMessages" />
        </div>
    </div>
</body>
</html>
